<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>走马灯</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 500px">
        <!--走马灯不能设置宽度-->
        <el-carousel height="150px">
            <el-carousel-item>
                <img src="imgs/b1.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="imgs/b2.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="imgs/b3.jpg" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </div>

    <h1>商品走马灯</h1>
    <div style="width: 300px;">
        <el-carousel>
            <el-carousel-item v-for="url in arr">
                <img :src="url" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </div>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr:["imgs/a.jpg","imgs/b.jpg","imgs/c.jpg"]
            }
        },
        methods:{

        }
    })
</script>
</html>